<template>
  <div>
    <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
      <el-radio-button :label="false" v-show="isCollapse">
        <i class="el-icon-arrow-right"></i>
      </el-radio-button>
      <el-radio-button :label="true" v-show="!isCollapse">
        <i class="el-icon-arrow-left"></i>
      </el-radio-button>
    </el-radio-group>
    <el-menu v-if="categoryData" class="el-menu-vertical-demo" @select="handleSelect" :collapse="isCollapse"
      :default-active="activeIndex">
      <el-submenu v-for="(item, key) in categoryData" :key="item.id" :index="key">
        <template slot="title">
          <i class="el-icon-menu"></i>
          <span slot="title">{{ item.label }}</span>
        </template>
        <el-menu-item v-for="(subItem, subKey) in item.children" :key="subItem.id" :index="`${key}-${subKey}`">
          {{ subItem.label }}
        </el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Emit } from 'vue-property-decorator';
import { treeSelectAll } from '@/api/indexCategory';
@Component({
  components: {}
})
export default class DataParamMenu extends Vue {

  isCollapse = true;
  categoryData: any = [];
  activeIndex = '';

  handleOpen(key, keyPath) {
    console.log(key, keyPath);
  }
  handleClose(key, keyPath) {
    console.log(key, keyPath);
  }
  @Emit('handleSelect')
  handleSelect(index: string) {
    const [parentIndex, childIndex] = index.split('-').map(Number);

    // 确保数据存在且索引有效
    if (
      this.categoryData[parentIndex] &&
      this.categoryData[parentIndex].children[childIndex]
    ) {
      const selectedItem = this.categoryData[parentIndex].children[childIndex];
      return selectedItem;
    }
    return null;
  }
  created() {
    treeSelectAll({}).then((response: any) => {
      if (response && response.data) {
        this.categoryData = response.data;
      }
    }).catch((e) => {
      console.error(e);
    });
  }
}
</script>
<style lang="scss" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>
